import React from "react";
import {Button, Flex} from "antd";

export function MessageInput({
                               transcriptionResult,
                               recordingState,
                               onStart,
                               onStop,
                               onReRecord,
                               onSubmit,
                             }) {
  return (
    <Flex vertical={true} justify="center" align="center" style={{width: '100%'}}>
      <p>{transcriptionResult}</p>
      {recordingState === "idle" && <Button onClick={onStart}>开始录音</Button>}
      {recordingState === "recording" && (
        <Button onClick={onStop}>停止录音</Button>
      )}
      {recordingState === "stop" && (
        <Flex justify="center" align="center">
          <Button onClick={onReRecord}>重新录音</Button>
          <Button onClick={onSubmit}>提交</Button>
        </Flex>
      )}
    </Flex>
  );
}

export default MessageInput;
